<template>
    <div id="content" class="col-md-10 col-sm-10 col-xs-9" style="height: 100%">
        <iframe sandbox="allow-popups allow-scripts allow-forms allow-same-origin" marginwidth="0" style="height:100%;width:100%" marginheight="0" scrolling="no" frameborder="0" src="/disk/c?p=HXI14MMB5XK7YNG$@HXI14MMB5XK7YNG"></iframe>
    </div>
    <!--<div id="content" class="col-md-10 col-sm-10 col-xs-9" style="height: 100%">
        <iframe sandbox="allow-popups allow-scripts allow-forms allow-same-origin" marginwidth="0" style="height:100%;width:100%" marginheight="0" scrolling="no" frameborder="0" src="/watcher/HXI14MMB5XK7YNG$@HXI14MMB5XK7YNG/disk/c"></iframe>
    </div>-->
</div>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        computed: mapGetters({
            show: 'getShow'
        }),
        methods: {
            displayArticles (type) {
                this.$store.dispatch('displayArticles', type)
            }
        },
        mounted () {
            this.$store.dispatch('displayArticles', 'hot')
            this.$store.dispatch('changeArticleFlag', true)
        }
    }

</script>

<style>
  .btn-group{
    margin-left: 15px;
    margin-top:20px;
  }
  .btn-group .active{
    background-color: #de533a;
  }
  .btn-group .active a{
    color: #ffffff;
  }
  .btn-group li{
    margin: 5px 5px;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
  }
  @media screen and (max-width: 1100px){
    .showbar {
      display: none;
    }
  }
  @media screen and (max-width: 768px){
    .article-page {
      width: 100%;
      right: 0;
    }
  }
</style>
